<template>
  <div class="star-score">
    <div  class="star fullstar" v-for=" i in fullstar"></div>
    <div  class="star halfstar" v-for=" i in halfstar"></div>
    <div  class="star nullstar" v-for=" i in nullstar"></div>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  export default {
    name: 'StarScore',
    computed: {
      fullstar(){
        let wm_poi_score = this.score || '';

        let score = wm_poi_score.toString();

        let scoreArray = score.split('.');

        // 满星个数
        let fullstar = parseInt(scoreArray[0]);
        return  fullstar
      },
      halfstar(){
        let wm_poi_score = this.score || '';

        let score = wm_poi_score.toString();

        let scoreArray = score.split('.');

        // 满星个数
        let halfstar = parseInt(scoreArray[1]) >= 5 ? 1 : 0;
        return  halfstar
      },
      nullstar(){
        let wm_poi_score = this.score || '';

        let score = wm_poi_score.toString();

        let scoreArray = score.split('.');

        // 满星个数
        let nullstar = 5 - this.fullstar - this.halfstar;
        return  nullstar
      }
    },
    methods:{
    },
    props:['score']
  }
</script>

<style lang="stylus" scoped>
  @import '~@/assets/main.styl'

  .star-score {
    .star {
      width: 0.20rem;
      height: 0.20rem;
      float: left;
      background-size: cover;
    }
    .fullstar {
      background-image: url('/app2/img/fullstar.png');
    }
    .halfstar {
      background-image: url('/app2/img/halfstar.png');
    }
    .nullstar {
      background-image: url('/app2/img/gray-star.png');
    }
  }



</style>
